<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License. 
-->
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css">
    <style type="text/css">
        .dp-highlighter {
            width:95% !important;
        }
    </style>
    <style type="text/css">
        .footer {
            background-image:      url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif');
            background-repeat:     repeat-x;
            background-position:   left top;
            padding-top:           4px;
            color:                 #666;
        }
    </style>
    <script type="text/javascript" language="javascript">
        var hide = null;
        var show = null;
        var children = null;

        function init() {
            /* Search form initialization */
            var form = document.forms['search'];
            if (form != null) {
                form.elements['domains'].value = location.hostname;
                form.elements['sitesearch'].value = location.hostname;
            }

            /* Children initialization */
            hide = document.getElementById('hide');
            show = document.getElementById('show');
            children = document.all != null ?
                    document.all['children'] :
                    document.getElementById('children');
            if (children != null) {
                children.style.display = 'none';
                show.style.display = 'inline';
                hide.style.display = 'none';
            }
        }

        function showChildren() {
            children.style.display = 'block';
            show.style.display = 'none';
            hide.style.display = 'inline';
        }

        function hideChildren() {
            children.style.display = 'none';
            show.style.display = 'inline';
            hide.style.display = 'none';
        }
    </script>
    <title>Themes and Templates</title>
</head>
<body onload="init()">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
    <tr class="topBar">
        <td align="left" valign="middle" class="topBarDiv" align="left" nowrap>
            &nbsp;<a href="home.html">Home</a>&nbsp;&gt;&nbsp;<a href="guides.html">Guides</a>&nbsp;&gt;&nbsp;<a href="tag-developers-guide.html">Tag Developers Guide</a>&nbsp;&gt;&nbsp;<a href="struts-tags.html">Struts Tags</a>&nbsp;&gt;&nbsp;<a href="ui-tags.html">UI Tags</a>&nbsp;&gt;&nbsp;<a href="themes-and-templates.html">Themes and Templates</a>
        </td>
        <td align="right" valign="middle" nowrap>
            <form name="search" action="https://www.google.com/search" method="get">
                <input type="hidden" name="ie" value="UTF-8" />
                <input type="hidden" name="oe" value="UTF-8" />
                <input type="hidden" name="domains" value="" />
                <input type="hidden" name="sitesearch" value="" />
                <input type="text" name="q" maxlength="255" value="" />
                <input type="submit" name="btnG" value="Google Search" />
            </form>
        </td>
    </tr>
</table>

<div id="PageContent">
    <div class="pageheader" style="padding: 6px 0px 0px 0px;">
        <!-- We'll enable this once we figure out how to access (and save) the logo resource -->
        <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"-->
        <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div>
        <div style="margin: 0px 10px 8px 10px"  class="pagetitle">Themes and Templates</div>

        <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;">
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=14247">
                <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=14247">Edit Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">
                <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a>
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">Browse Space</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=14247">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=14247">Add Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=14247">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add News"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=14247">Add News</a>
        </div>
    </div>

    <div class="pagecontent">
        <div class="wiki-content">
            <div id="ConfluenceContent"><p>The notions of "themes" and "templates" are at the core of the HTML <a shape="rect" href="struts-tags.html">Struts Tags</a> provided by the framework.</p>

<h2 id="ThemesandTemplates-Definitions">Definitions</h2>

<div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> tag </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> A small piece of code executed from within <a shape="rect" href="jsp.html">JSP</a>, <a shape="rect" href="freemarker.html">FreeMarker</a>, or <a shape="rect" href="velocity.html">Velocity</a>. </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> template </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> A bit of code, usually written in <a shape="rect" href="freemarker.html">FreeMarker</a>, that can be rendered by certain tags (HTML tags) </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> theme </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> A  collection of <em>templates</em> packaged together to provide common functionality </p></td></tr></tbody></table></div>

<p><img class="emoticon emoticon-light-on" src="https://cwiki.apache.org/confluence/s/en_GB/5982/f2b47fb3d636c8bc9fd0b11c0ec6d0ae18646be7.1/_/images/icons/emoticons/lightbulb_on.png" data-emoticon-name="light-on" alt="(lightbulb)"> See <a shape="rect" href="struts-tags.html">Struts Tags</a> for more about the HTML and other tags provided by the framework.</p>

<h2 id="ThemesandTemplates-TemplateBasics">Template Basics</h2>

<div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> <a shape="rect" href="template-loading.html">Template Loading</a> </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> How templates are loaded </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> <a shape="rect" href="selecting-template-directory.html">Selecting Template Directory</a> </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> How the template directories are loaded </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> <a shape="rect" href="selecting-themes.html">Selecting Themes</a> </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> How you can pick a theme when writing your results </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> <a shape="rect" href="extending-themes.html">Extending Themes</a> </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> How to create your own themes based on existing themes </p></td></tr></tbody></table></div>


<h2 id="ThemesandTemplates-MoreAboutThemes">More About Themes</h2>

<div class="table-wrap"><table class="confluenceTable"><tbody><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> <a shape="rect" href="simple-theme.html">simple theme</a> </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> A minimal theme with no "bells and whistles" </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> <a shape="rect" href="xhtml-theme.html">xhtml theme</a> </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> The default theme that uses common HTML practices </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> <a shape="rect" href="cssxhtml-theme.html">css_xhtml theme</a> </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> The <a shape="rect" href="xhtml-theme.html">xhtml theme</a> re-implemented using strictly CSS for layout </p></td></tr><tr><th colspan="1" rowspan="1" class="confluenceTh"><p> <a shape="rect" href="ajax-theme.html">ajax theme</a> </p></th><td colspan="1" rowspan="1" class="confluenceTd"><p> A theme based on the <a shape="rect" href="xhtml-theme.html">xhtml theme</a> that provides advanced AJAX features </p></td></tr></tbody></table></div>


<h2 id="ThemesandTemplates-Next:">Next: <a shape="rect" href="form-tags.html">Form Tags</a></h2></div>
        </div>

                    <div class="tabletitle">
                Children
            <span class="smalltext" id="show" style="display: inline;">
              <a href="javascript:showChildren()">Show Children</a></span>
            <span class="smalltext" id="hide" style="display: none;">
              <a href="javascript:hideChildren()">Hide Children</a></span>
            </div>
            <div class="greybox" id="children" style="display: none;">
                                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                            </div>
        
    </div>
</div>
<div class="footer">
    Generated by CXF SiteExporter
</div>
</body>
</html>
